<template>
  <el-aside width="300px" class="sidebar">
    <el-card class="user-card" v-if="isLogin">
      <div class="user-avatar">
        <el-avatar :size="80" :src="user.avatar" />
      </div>
      <div class="user-info">
        <h4>{{ user.nickname }}</h4>
        <p class="user-bio">{{ user.bio }}</p>
      </div>
      <el-row :gutter="20" class="user-stats">
        <el-col :span="12">
          <div class="stat-item">
            <div class="stat-value">{{ user.following }}</div>
            <div class="stat-label">关注</div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="stat-item">
            <div class="stat-value">{{ user.followers }}</div>
            <div class="stat-label">粉丝</div>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <el-card class="tag-cloud">
      <template #header>
        <h3>热门标签</h3>
      </template>
      <el-tag
        v-for="tag in hotTags"
        :key="tag.id"
        type="info"
        class="tag-item"
        effect="plain"
      >
        {{ tag.name }}
      </el-tag>
    </el-card>
  </el-aside>
</template>

<script setup>
import { ref } from 'vue';

const isLogin = ref(true);
const user = ref({
  avatar: '',
  nickname: '用户名',
  bio: '个人简介...',
  following: 120,
  followers: 350
});

const hotTags = ref([
  { id: 1, name: 'AI' },
  { id: 2, name: '科技' },
  { id: 3, name: '电影' }
]);
</script>

<style scoped>
.sidebar {
  padding-left: 20px;
}

.user-card {
  margin-bottom: 20px;
  text-align: center;
}

.user-avatar {
  margin: 0 auto 15px;
}

.user-stats {
  margin-top: 15px;
}

.tag-cloud {
  margin-bottom: 20px;
}

.tag-item {
  margin: 4px;
}
</style>